<template>
  <div class="dashboard">
    <h2>仪表盘</h2>
    
    <div class="card-container">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in statCards" :key="index">
          <el-card class="stat-card" shadow="hover">
            <div class="card-content">
              <h3>{{ item.title }}</h3>
              <div class="card-value">{{ item.value }}</div>
              <div class="card-footer">
                <span>{{ item.growth > 0 ? '+' : '' }}{{ item.growth }}%</span>
                <span>较上周</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <div class="chart-container">
      <el-card shadow="hover">
        <template #header>
          <div class="chart-header">
            <span>系统访问统计</span>
          </div>
        </template>
        <div class="chart-placeholder">
          此处放置图表组件（实际项目中可使用ECharts等）
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 模拟的统计卡片数据
const statCards = ref([
  { title: '用户总数', value: '1,234', growth: 12.5 },
  { title: '本周访问量', value: '6,560', growth: 8.2 },
  { title: '任务完成率', value: '78%', growth: -2.5 },
  { title: '系统消息', value: '25', growth: 30 }
])
</script>

<style scoped>
.dashboard {
  padding: 10px;
  width: 100%;
}

.card-container {
  margin-top: 20px;
  margin-bottom: 30px;
  width: 100%;
}

.stat-card {
  height: 120px;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-content h3 {
  margin: 0;
  font-size: 16px;
  color: #606266;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin: 15px 0;
  color: #303133;
  flex-grow: 1;
}

.card-footer {
  font-size: 12px;
  color: #909399;
}

.chart-container {
  margin-bottom: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  color: #909399;
  border-radius: 4px;
}
</style> 